:root {
    --rainbow_light: 65%;
    --ascension_light: 50%;
    --ascension_light2: 60%;
    --arcane_light: 50%;
    --collapse_light: 60%;
    --unstable_light: 60%;
    --decayed_light: 50%;
    --decayed_sat: 16%;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #221625;
    font-family: "Fira Code";
    font-size: 14.4px;
    font-weight: normal;
    margin: 0em;
    padding: 0em;
    --mobile: 0;
}

@media (pointer: coarse) {
    body {
        font-size: 2.25vw;
        --mobile: 1;
    }
}

.catchup_screen {
    display: none;
    background: black;
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.catchup_title {
    display: flex;
    margin-bottom: 7em;
    justify-content: center;
}

.spice_idle {
    font-family: "Fira Sans";
    font-size: 6em;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: 0em;
}

.catchup_version {
    font-size: 2em;
    color: white;
    margin-left: 0.5em;
    margin-top: 1.8em;
    margin-bottom: 0em;
}

.catchup_header {
    font-size: 2em;
    color: white;
    text-align: center;
    margin-bottom: 2em;
}

.catchup_text {
    font-size: 1.5em;
    color: white;
    text-align: center;
    margin-top: 0em;
    margin-bottom: 0em;
}

.catchup_warning {
    font-size: 1.25em;
    color: white;
    text-align: center;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

.catchup_back {
    width: 80em;
    height: 2em;
    background: black;
    border: 1px solid white;
    margin-top: 1em;
    margin-bottom: 3em;
    margin-left: auto;
    margin-right: auto;
}

.catchup_progress {
    width: 0%;
    height: 100%;
    background: white;
}

.catchup_set {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
}

#catchup_input {
    background: black;
    font-size: 1em;
    width: 4em;
    height: 1.5em;
    margin-left: 0.5em;
}

.catchup_button {
    padding: 0.2em 0.4em;
    background: black;
    font-family: "Fira Code";
    font-size: 1.25em;
    font-weight: 400;
    color: #aaaaaa;
    border: 1px solid white;
    margin-bottom: 0.3em;
    margin-right: 0.3em;
    cursor: pointer;
}

.startup_button {
    padding: 0.2em 0.4em;
    background: black;
    font-family: "Fira Code";
    font-size: 1.75em;
    font-weight: 400;
    color: #aaaaaa;
    border: 1px solid white;
    margin-bottom: 0.3em;
    margin-right: 0.3em;
    cursor: pointer;
}

.catchup_button:hover, .startup_button:hover {
    color: white;
}

.catchup_button:active, .startup_button:active {
    background: white;
    color: black;
}

@media (pointer: coarse) {
    .catchup_panel {
        width: 100%;
    }

    .catchup_header, .catchup_text {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    #catchup_input_text {
        width: auto;
        margin-left: 0em;
        margin-right: 0em;
    }

    .catchup_back {
        width: 80%;
    }
}

main {
    margin: 32px;
    padding-bottom: 32px;
}

.tabs_block {
    position: sticky;
    top: 0em;
    z-index: 1;
}

.menu, .submenu {
    display: flex;
    margin: 0em;
    flex-wrap: wrap;
}

#spices_tabs {
    display: none;
}

.tab {
    background: black;
    padding: 0.3em 0.5em;
    font-family: "Fira Code";
    font-size: 2em;
    border: none;
    flex: 1;
    cursor: default;
}

.savebank_tab {
    background: #151116;
    padding: 0.75em;
    font-family: "Fira Code";
    font-size: 2em;
    border: none;
    width: 100%;
    flex: 0;
    margin-top: 0em;
    margin-bottom: 0em;
    cursor: default;
}

.subtab {
    background: #151116;
    padding: 0.3em 0.5em;
    font-family: "Fira Code";
    font-size: 1.5em;
    border: none;
    flex: 1;
}

@media (pointer: coarse) {
    .tab {
        font-size: 1.6em;
    }

    .subtab {
        font-size: 1.2em;
    }
}

.locked {
    color: #666666;
    font-weight: normal;
}

.unlocked {
    color: #aaaaaa;
    font-weight: normal;
    cursor: pointer;
}

.unlocked:hover {
    color: white;
    font-weight: normal;
}

.selected {
    color: white;
    font-weight: bold;
}

.notice {
    color: hsl(calc(var(--time) * 36), 50%, 50%);
    font-weight: normal;
    cursor: pointer;
}

.notice:hover {
    color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    font-weight: normal;
}

#modal {
    display: none;
}

.modal_center {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.modal_background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 50%;
    z-index: 2;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.modal_panel {
    background: #221625;
    border: 1px solid white;
    box-shadow: 0 0 2em black;
    width: 40em;
    padding: 1.5em;
}

@media (pointer: coarse) {
    .modal_panel {
        width: calc(90% - 3em);
    }
}

.modal_text {
    font-size: 1.5em;
    color: white;
    text-align: center;
    margin-top: 0em;
}

#import_input {
    width: calc(100% - 0.5em - 2px);
    height: 20em;
    margin-bottom: 2em;
    resize: none;
}

#modal_confirm, #modal_import {
    display: none;
}

#color_shift {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

#color_shift_button {
    display: inline;
    margin-left: 2em;
}

#crystal_buy_i, #arcane_buy_n {
    display: inline;
}

#statistics_page, #yellow_page, #green_page, #blue_page, #pink_page, #prestige_page, #crystal_page, #crystal_page2, #ascension_page, #ascension_page2, #challenges_page, #collapse_page, #compendium_page, #settings_page {
    display: none;
}

.spice_num {
    font-size: 4em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: -0.15em;
}

.spice_text {
    font-size: 2em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.spice_up {
    font-size: 1.5em;
    font-weight: 400;
    color: white;
    margin-top: 0.5em;
    margin-bottom: 2em;
}

.spice_gen_page {
    display: flex;
}

@media (pointer: coarse) {
    .spice_gen_page {
        flex-direction: column;
    }
}

@media (pointer: fine), (pointer: none) {
    .spice_gen_page {
        flex-direction: row;
    }
}

.spice_gen_panel {
    padding-right: 6em;
}

.spice_gen {
    margin-top: 1.5em;
}

.spice_gen_s {
    margin-top: 5em;
}

.spice_gen_name {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0.4em;
}

.spice_gen_info {
    font-size: 1em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0.6em;
    margin-left: 2em;
}

.spice_gen_boost {
    font-size: 1em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: 0.8em;
    margin-left: 2em;
}

#color_shift_unlock {
    margin-left: 0em;
    margin-top: 0.35em;
    margin-bottom: 0.3em;
}

.spice_buttons {
    margin-left: 2em;
}

.center_button {
    display: flex;
    justify-content: center;
}

.prestige_upgrade_auto {
    margin-top: 5em;
    margin-bottom: 0.5em;
}

.spice_buy {
    padding: 0.2em 0.4em;
    background-color: #311936;
    font-family: "Fira Code";
    font-size: 1em;
    font-weight: 400;
    color: white;
    border: 1px solid white;
    margin-bottom: 0.3em;
    margin-right: 0.3em;
    cursor: default;
}

.spice_buy:hover {
    background-color: #421d49;
}

.spice_buy:active {
    background-color: #571c66;
}

.can_buy {
    cursor: pointer;
}

.noshift {
    color: #9b9b9b;
    cursor: default;
}

.noshift:hover {
    background-color: #311936;
}

.noshift:active {
    background-color: #311936;
}

.shift1 {
    color: #ffd107;
    text-shadow: 0 0 0.2em #ffd107;
    cursor: pointer;
}

.shift2 {
    color: #25dd8a;
    text-shadow: 0 0 0.2em #25dd8a;
    cursor: pointer;
}

.shift3 {
    color: #0072ff;
    text-shadow: 0 0 0.2em #0072ff;
    cursor: pointer;
}

.shift4 {
    color: #ff3dd8;
    text-shadow: 0 0 0.2em #ff3dd8;
    cursor: pointer;
}

.boost {
    color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    text-shadow: 0 0 0.2em hsl(calc(var(--time) * 36), 100%, 50%);
    cursor: pointer;
}

.max_all {
    font-size: 1.25em;
    cursor: pointer;
}

.a_disabled {
    font-size: 1.25em;
    color: #ff2714;
    cursor: pointer;
}

.a_enabled {
    font-size: 1.25em;
    color: #25dd8a;
    cursor: pointer;
}

.modal_button {
    font-size: 1.5em;
    cursor: pointer;
    margin-right: 1em;
}

.modal_button_last {
    font-size: 1.5em;
    cursor: pointer;
    margin-right: 0em;
}

#boost_auto, #infusion_auto, #enchantment_auto, #research_upgrade_auto, #construct_auto, #conversion_auto, #prestige_auto_toggle, #ascend_auto_toggle, #collapse_auto_toggle {
    font-size: 1em;
}

.red_spice{
    color: #ff2714;
}

.yellow_spice {
    color: #ffd107;
}

.green_spice {
    color: #25dd8a;
}

.blue_spice {
    color: #0072ff;
}

.pink_spice {
    color: #ff3dd8;
}

.crystal_spice {
    color: white;
    text-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
}

.arcane_spice {
    color: hsl(calc(5 * sin(var(--time) / 5) + 273), calc(15% * sin(var(--time)) + 85%), var(--arcane_light));
    text-shadow: 0em 0em 0.2em hsl(calc(5 * sin(var(--time) / 5) + 273), calc(15% * sin(var(--time)) + 85%), var(--arcane_light)), 0em 0em 0.5em hsl(calc(5 * sin(var(--time) / 5) + 273), calc(9% * sin(var(--time)) + 91%), calc(7% * sin(var(--time)) + 48%))
}

.red_cost {
    color: #ff2714;
    font-weight: 700;
}

.yellow_cost {
    color: #ffd107;
    font-weight: 700;
}

.green_cost {
    color: #25dd8a;
    font-weight: 700;
}

.blue_cost {
    color: #0072ff;
    font-weight: 700;
}

.pink_cost {
    color: #ff3dd8;
    font-weight: 700;
}

.rainbow_cost {
    color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    text-shadow: 0 0 0.2em hsl(calc(var(--time) * 36), 100%, 50%);
    font-weight: 700;
}

.crystal_cost {
    color: white;
    text-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
    font-weight: 700;
}

.rune_cost {
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    text-shadow: 0em 0em 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    font-weight: 700;
}

.arcane_cost {
    color: hsl(calc(5 * sin(var(--time) / 5) + 273), calc(15% * sin(var(--time)) + 85%), var(--arcane_light));
    text-shadow: 0em 0em 0.2em hsl(calc(5 * sin(var(--time) / 5) + 273), calc(15% * sin(var(--time)) + 85%), var(--arcane_light)), 0em 0em 0.5em hsl(calc(5 * sin(var(--time) / 5) + 273), calc(9% * sin(var(--time)) + 91%), calc(7% * sin(var(--time)) + 48%));
    font-weight: 700;
}

.atomic_cost {
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    font-weight: 700;
}

.empty_cost {
    color: #9b9b9b;
    font-weight: 700;
}

.prestige_header {
    display: flex;
}

.rainbow_spice_panel {
    flex-grow: 1;
}

.prestige_panel {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
    margin-top: 0.75em;
}

#rainbow_spice_up, #prestige_auto_block, #rune_control_block, #ascend_auto_block {
    flex-grow: 1;
}

.prestige_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: right;
}

#prestige_req {
    color: grey;
}

.prestige_button {
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 400;
    margin-left: 0.4em;
    flex-grow: 0;
    cursor: default;
}

.reset_efficiency {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 1em;
    margin-bottom: 0em;
    text-align: right;
}

#collapse_efficiency {
    margin-bottom: -3.675em;
}

#expand_efficiency {
    text-align: center;
}

#prestige_upgrade_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    height: 27em;
    margin-left: calc(50% - 32.4em);
    margin-bottom: 18.5em;
}

#crystal_upgrade_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    height: 27em;
    margin-left: calc(50% - 32.4em);
    margin-bottom: 18.5em;
}

@media (pointer: coarse) {
    #prestige_upgrade_block {
        width: 32.4em;
        height: 54em;
        margin-left: calc(50% - 16.2em);
    }

    #crystal_upgrade_block {
        width: 32.4em;
        height: 54em;
        margin-left: calc(50% - 16.2em);
    }

    .reset_efficiency {
        text-align: left;
    }

    #ascend_efficiency {
        margin-bottom: 2.5em;
    }

    #collapse_efficiency {
        margin-bottom: 0em;
    }
}

.prestige_upgrade {
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    margin: 0.5em;
    width: 17em;
    height: 9em;
    cursor: default;
}

.bold {
    font-weight: bold;
}

.big {
    font-weight: bold;
    font-size: 6em;
}

.rainbow_spice {
    color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    text-shadow: 0 0 0.2em hsl(calc(var(--time) * 36), 100%, 50%);
}

.p_locked {
    background-color: black;
    color: white;
    border: 1px solid white;
}

.p_unlocked {
    background-color: black;
    color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    text-shadow: 0 0 0.2em hsl(calc(var(--time) * 36), 100%, 50%);
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.3em hsl(calc(var(--time) * 36), 100%, 50%), 0 0 0.6em hsl(calc(var(--time) * 36), 100%, 50%) inset;
    cursor: pointer;
}

.p_unlocked:hover {
    background-color: black;
    color: white;
    text-shadow: 0 0 0.2em hsl(calc(var(--time) * 36), 100%, 50%);
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.3em hsl(calc(var(--time) * 36), 100%, 50%), 0 0 1em hsl(calc(var(--time) * 36), 100%, 50%) inset;
}

.p_unlocked:active {
    background-color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.4em hsl(calc(var(--time) * 36), 100%, 50%);
}

.p_unlocked2 {
    background-color: black;
    color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    text-shadow: 0 0 0.5em hsl(calc(var(--time) * 36), 100%, 50%);
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.5em hsl(calc(var(--time) * 36), 100%, 50%), 0 0 1.8em hsl(calc(var(--time) * 36), 100%, 50%) inset;
    cursor: pointer;
}

.p_unlocked2:hover {
    background-color: black;
    color: white;
    text-shadow: 0 0 0.5em hsl(calc(var(--time) * 36), 100%, 50%);
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.5em hsl(calc(var(--time) * 36), 100%, 50%), 0 0 3em hsl(calc(var(--time) * 36), 100%, 50%) inset;
}

.p_unlocked2:active {
    background-color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.5em hsl(calc(var(--time) * 36), 100%, 50%);
}

.p_bought {
    background-color: hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(var(--time) * 36), 100%, var(--rainbow_light));
    box-shadow: 0 0 0.5em hsl(calc(var(--time) * 36), 100%, 50%);
}

.c_unlocked {
    background-color: black;
    color: #ff2ad4;
    text-shadow: 0em 0em 0.2em #ff2ad4, 0em 0em 0.5em #ff2ad4;
    border: 1px solid #ff2ad4;
    box-shadow: 0em 0em 0.5em #ff2ad4, 0em 0em 3em #ff2ad4 inset;
    cursor: pointer;
}

.c_unlocked:hover {
    background-color: black;
    color: white;
    text-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
    border: 1px solid white;
    box-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4, 0em 0em 1.2em white inset, 0em 0em 3em #ff2ad4 inset;
}

.c_unlocked:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
}

.c_bought {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0em 0em 0.2em white, 0em 0em 0.5em #ff2ad4;
}

.p_special {
    margin-left: 27.5em;
    margin-top: 2.5em;
}

@media (pointer: coarse) {
    .p_special {
        margin-left: 9.625em;
    }
}

.crystal_header {
    display: flex;
}

.crystal_panel {
    flex-grow: 1;
}

#rainbow_spice_num2, #rainbow_spice_text2, #rainbow_spice_up2 {
    text-align: right;
}

#crystal_buy_i, #crystal_max_i {
    display: inline;
}

#crystal_gen_i {
    margin-top: 0em;
    margin-bottom: 3.5em;
}

#prestige_auto_buttons, #ascend_auto_buttons, #collapse_auto_buttons {
    display: flex;
    justify-content: right;
    margin-top: 1em;
}

#prestige_auto_mode, #ascend_auto_mode, #collapse_auto_mode {
    margin-right: 0em;
    cursor: pointer;
}

#prestige_boosts, #prestige_spice, #prestige_time, #prestige_boosts_delta, #prestige_spice_delta, #ascend_runes, #ascend_time, #ascend_c11, #ascend_runes_delta, #collapse_spice, #collapse_time, #collapse_decay, #collapse_spice_delta {
    display: flex;
    justify-content: right;
    margin-top: 0.25em;
}

#prestige_goal, #ascend_goal, #collapse_goal {
    display: flex;
    justify-content: right;
    margin-top: 0.3em;
}

@media (pointer: coarse) {
    .prestige_header {
        flex-direction: column;
    }

    .prestige_text {
        text-align: left;
    }

    .prestige_panel {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .prestige_button {
        margin-left: 0em;
        margin-right: 0.4em;
    }

    #prestige_auto_buttons, #prestige_boosts, #prestige_spice, #prestige_time, #prestige_boosts_delta, #prestige_spice_delta {
        justify-content: left;
    }

    #rainbow_spice_up, #rainbow_spice_up2 {
        margin-bottom: 0em;
    }

    .rainbow_spice_panel {
        margin-bottom: 1.5em;
    }

    .crystal_header {
        flex-direction: column-reverse;
    }

    #rainbow_spice_num2, #rainbow_spice_text2, #rainbow_spice_up2 {
        text-align: left;
    }

    .spice_num {
        font-size: 3.25em;
    }
}

#upgrade_auto_toggle, #upgrade_auto_toggle2 {
    margin-right: 0em;
}

.p_auto_text {
    font-size: 1em;
    font-weight: 400;
    color: white;
    margin-top: 0.075em;
    margin-bottom: 0em;
    margin-right: 0.5em;
    text-align: right;
    display: inline;
}

@media (pointer: coarse) {
    .p_auto_text {
        text-align: left;
    }
}

#prestige_goal_text {
    margin-top: 0.3em;
}

#prestige_goal_reset {
    margin-right: 0em;
}

#ascend_c11_text {
    margin-top: 0.3em;
}

#ascend_auto_c11 {
    margin-right: 0em;
}

.input {
    background-color: #311936;
    width: 8em;
    color: white;
    padding: 0.2em 0.25em;
    font-family: "Fira Code";
    font-size: 0.8em;
    font-weight: normal;
    border: 1px solid white;
    display: inline;
}

.ascension_header {
    display: flex;
}

.ansuz_panel {
    flex-grow: 1;
}

.ansuz_num {
    font-size: 4em;
    font-weight: 700;
    color: white;
    margin-top: -0.15em;
    margin-bottom: 0em;
}

.ansuz_text {
    font-size: 2em;
    font-weight: 700;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.ascension_panel {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
    margin-top: 0.75em;
}

.ascend_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: right;
}

#ascend_req {
    color: grey;
}

.ascend_button {
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 400;
    margin-left: 0.4em;
    flex-grow: 0;
    cursor: default;
}

.ascension_upgrade {
    cursor: default;
}

.a_locked {
    background-color: black;
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.a_unlocked {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 80%, 10%);
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    text-shadow: 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.3em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 1em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
    cursor: pointer;
}

.a_unlocked:hover {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 80%, 20%);
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.3em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 1em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
}

.a_unlocked:active {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    box-shadow: 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.a_unlocked2 {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 80%, 10%);
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    text-shadow: 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.6em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
    cursor: pointer;
}

.a_unlocked2:hover {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 80%, 20%);
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.6em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
}

.a_unlocked2:active {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    box-shadow: 0 0 0.8em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.a_bought {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    box-shadow: 0 0 0.8em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.ac_locked {
    background-color: black;
    color: #cccccc;
    border: 1px solid #cccccc;
}

.ac_unlocked {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.5em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.6em white, 0 0 0.6em white inset, 0 0 2em #cccccc inset;
    cursor: pointer;
}

.ac_unlocked:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.25em white, 0 0 0.5em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.6em white, 0 0 0.6em white inset, 0 0 2em white inset;
}

.ac_unlocked:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.8em #cccccc;
}

.a_active {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.15em white, 0 0 0.3em #cccccc inset, 0 0 1em #cccccc inset;
    cursor: pointer;
}

.a_active:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.15em white, 0 0 0.3em white inset, 0 0 1em white inset;
}

.a_active:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.4em #cccccc;
}

.ac_bought {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.8em #cccccc;
}

.runes {
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    text-shadow: 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.rune_panel {
    margin-top: 2em;
    margin-bottom: 2em;
}

.rune_header {
    font-size: 2em;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: 0em;
}

.rune_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0.1em;
    margin-bottom: 0.6em;
    margin-left: 1.5em;
}

.rune_menu {
    display: flex;
    flex-direction: row;
    margin-left: 2em;
}

.rune_control {
    display: flex;
    flex-direction: row;
    margin-top: 0.5em;
    margin-bottom: 0em;
}

#distribute_buttons {
    margin-top: 0.5em;
    margin-bottom: 3em;
}

#distributor {
    margin-bottom: 3em;
}

#distributor_title {
    margin-top: -0.5em;
    margin-bottom: 0.25em;
}

.distributor_text, .challenge_auto_text {
    color: white;
    font-size: 1.25em;
    margin: 0em 0.5em 0em 0em;
}

.distributor_error {
    color: #ff2714;
    font-size: 1.25em;
    margin: 0em 0.5em 0em 2.6em;
}

.distributor_header {
    color: white;
    font-size: 1.25em;
    margin-top: 1em;
    margin-bottom: 0.6em;
    margin-left: 1.5em;
}

.distributor_percent {
    color: white;
    font-size: 1.25em;
    margin: 0em 0.5em 0em 0.5em;
}

.distributor_block {
    display: flex;
    margin-top: 0.1em;
    margin-bottom: 0.6em;
    margin-left: 1.5em;
}

#distribute_auto_toggle {
    margin-top: 0.1em;
    margin-bottom: 0.6em;
    margin-left: 1.35em;
}

#collider_portion {
    margin-left: 1.85em;
    margin-bottom: 1.35em;
}

#collider_timing {
    margin-left: 1.85em;
    margin-top: -0.65em;
    margin-bottom: 1.35em;
}

.distributor_input, .challenge_auto_input {
    font-size: 0.9em;
    width: 3.2em;
}

#collider_input2 {
    width: 5em;
}

@media (pointer: coarse) {
    .ascension_header {
        flex-direction: column;
    }

    .ascend_text {
        text-align: left;
    }

    .ascension_panel {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .ascend_button {
        margin-left: 0em;
        margin-right: 0.4em;
    }

    #ascend_auto_buttons, #ascend_runes, #ascend_time, #ascend_c11 {
        justify-content: left;
    }

    #ascend_auto_block {
        margin-bottom: 1.5em;
    }

    #distribute_buttons {
        margin-bottom: 2em;
    }

    .ansuz_num {
        font-size: 3.25em;
    }
}

#arcane_rune_control {
    justify-content: right;
}

.rune_button {
    font-size: 1.25em;
    font-family: "Fira Code";
    margin-right: 0.5em;
}

.ascend_info {
    color: white;
    font-size: 1.35em;
    margin-top: 1em;
    margin-bottom: 2em;
}

#ascension_upgrade_panel {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-left: -32px;
    margin-right: -32px;
}

#ascension_upgrade_panel2 {
    overflow-x: auto;
    overflow-y: hidden;
}

#ascension_upgrade_panel3 {
    position: relative;
    height: 240em;
    width: 73em;
    margin-left: auto;
    margin-right: auto;
}

.ascension_upgrade {
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    width: 17em;
    height: 9em;
    position: absolute;
    left: calc(50% - 8.5em);
    top: 0em;
}

.ascension_line {
    padding: 0em;
    margin: 0em;
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 90%, 30%);
    line-height: 1px;
    position: absolute;
    height: 2em;
    z-index: -1;
}

.ascension_line2 {
    padding: 0em;
    margin: 0em;
    background-color: #777777;
    line-height: 1px;
    position: absolute;
    height: 2em;
    z-index: -1;
}

.challenge_info {
    color: white;
    font-size: 1.35em;
    text-align: center;
    margin-top: 0em;
    margin-bottom: 3em;
}

.challenge_unlock {
    font-size: 1.5em;
    font-weight: 400;
    color: white;
    text-align: center;
    margin-top: 3.25em;
    margin-bottom: 2em;
}

.a_challenge_panel {
    display: flex;
    width: 70em;
    padding: 1em;
    background-color: black;
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.a_challenge_text {
    font-size: 1.35em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.a_challenge_header {
    font-size: 1.35em;
    font-weight: 400;
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    text-shadow: 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    margin-top: 0em;
    margin-bottom: 0em;
}

.a_challenge_block {
    flex-grow: 1;
}

.a_challenge_button {
    font-family: "Fira Code";
    font-size: 1.85em;
    font-weight: 700;
    width: 7.5em;
    flex-grow: 0;
    margin-left: 1em;
    cursor: default;
}

.incomplete {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 80%, 10%);
    color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    text-shadow: 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 1em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
    cursor: pointer;
}

.incomplete:hover {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 80%, 20%);
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light2));
    box-shadow: 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)), 0 0 1em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light)) inset;
}

.incomplete:active {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    box-shadow: 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.inprogress {
    background-color: hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
    box-shadow: 0 0 0.4em hsl(calc(25 * sin(var(--time) / 2) + 208), 100%, var(--ascension_light));
}

.finished {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white, 0 0 1em white inset;
    cursor: pointer;
}

.finished:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white, 0 0 1em white inset;
}

.finished:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white;
}

.complete {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.4em white;
}

.arcane_header {
    display: flex;
}

.arcane_panel {
    flex-grow: 1;
}

#ansuz_num3, #ansuz_text2 {
    text-align: right;
}

#ansuz_up, #ansuz_up2 {
    margin-top: -0.1em;
    margin-bottom: 0.75em;
}

#ansuz_up3 {
    margin-top: -0.1em;
    margin-bottom: 0.75em;
    text-align: right;
}

#arcane_buy_n, #arcane_max_n {
    display: inline;
}

#arcane_gen_n {
    margin-top: 0em;
    margin-bottom: 3.5em;
}

@media (pointer: coarse) {
    .a_challenge_header {
        font-size: 1.2em;
        margin-bottom: 0.15em;
    }

    .a_challenge_text {
        font-size: 1em;
    }

    .a_challenge_button {
        font-size: 1.35em;
        width: 100%;
        margin-left: 0em;
        margin-top: 0.75em;
        padding: 0.1em 0em;
    }

    .a_challenge_panel {
        width: calc(100% - 2em);
        flex-direction: column;
    }

    .arcane_header {
        flex-direction: column-reverse;
    }

    .ansuz_panel {
        margin-bottom: 1.5em;
    }

    #ansuz_text2, #ansuz_num3, #ansuz_up3 {
        text-align: left;
    }

    #arcane_rune_control {
        justify-content: left;
        margin-bottom: 1.5em;
    }
}

.collapse_header {
    display: flex;
}

.atomic_spice_panel {
    flex-grow: 1;
}

.collapse_panel {
    display: flex;
    justify-content: right;
    align-items: center;
    flex-grow: 1;
    margin-top: 0.75em;
}

.collapse_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: right;
}

#collapse_req {
    color: grey;
}

.collapse_button {
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 400;
    margin-left: 0.4em;
    flex-grow: 0;
    cursor: default;
}

.collapse_title {
    color: white;
    font-size: 2em;
    font-weight: bold;
    margin-top: 2em;
    margin-bottom: 0.25em;
}

.co_auto_margin {
    margin-top: 0.5em;
}

.atomic_button {
    font-size: 1.25em;
    font-family: "Fira Code";
}

.atomic_spice {
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
}

.collapse_info2 {
    color: white;
    font-size: 1.1em;
    margin-top: 1em;
    text-align: right;
}

.co_locked {
    background-color: black;
    color: hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
}

.co_unlocked {
    background-color: hsl(calc(30 * sin(var(--time)) + 102), 80%, 10%);
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset, 0 0 0.8em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%) inset;
    cursor: pointer;
}

.co_unlocked:hover {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 80%, 20%);
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)) inset, 0 0 1em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset;
}

.co_unlocked:active {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
}

.co_active {
    background-color: #333333;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc;
    border: 1px solid white;
    box-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc, 0 0 0.2em white inset, 0 0 0.8em #cccccc inset;
    cursor: pointer;
}

.co_active:hover {
    background-color: #555555;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em white;
    border: 1px solid white;
    box-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc, 0 0 0.2em white inset, 0 0 1em white inset;
}

.co_active:active {
    background-color: white;
    color: black;
    text-shadow: none;
    border: 1px solid white;
    box-shadow: 0 0 0.2em white, 0 0 0.4em #cccccc;
}

.collider_menu {
    margin-bottom: 5em;
}

#collider_tabs {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 1.9em;
}

#collider_tab1 {
    background-color: hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, 10%);
    border: 1px solid hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, var(--unstable_light));
    color: hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, var(--unstable_light));
    box-shadow: 0 0 0.2em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 40%) inset;
    text-shadow: 0 0 0.2em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 50%), 0 0 0.5em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 40%);
    cursor: pointer;
}

#collider_tab1:hover {
    background-color: hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, 16%);
    box-shadow: 0 0 0.4em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 50%) inset;
    text-shadow: 0 0 0.2em hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, var(--unstable_light)), 0 0 0.5em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 50%);
}

#collider_tab1:active, #collider_tab1.current_tab {
    background-color: hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, var(--unstable_light));
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab1.current_tab {
    cursor: default;
}

#collider_tab2 {
    background-color: black;
    border: 1px solid white;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.5em #aaaaaa;
    cursor: pointer;
}

#collider_tab2:hover {
    background-color: #333333;
    box-shadow: 0 0 0.4em white inset;
}

#collider_tab2:active, #collider_tab2.current_tab {
    background-color: white;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab2.current_tab {
    cursor: default;
}

#collider_tab3 {
    background-color: black;
    border: 1px solid #14ebff;
    color: #14ebff;
    text-shadow: 0 0 0.2em #14ebff, 0 0 0.5em #00a8b8;
    cursor: pointer;
}

#collider_tab3:hover {
    background-color: #003338;
    box-shadow: 0 0 0.4em #14ebff inset;
}

#collider_tab3:active, #collider_tab3.current_tab {
    background-color: #14ebff;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab3.current_tab {
    cursor: default;
}

#collider_tab4 {
    background-color: black;
    border: 1px solid #1f48ff;
    color: #1f48ff;
    text-shadow: 0 0 0.2em #1f48ff, 0 0 0.5em #0025b8;
    cursor: pointer;
}

#collider_tab4:hover {
    background-color: #000b38;
    box-shadow: 0 0 0.4em #1f48ff inset;
}

#collider_tab4:active, #collider_tab4.current_tab {
    background-color: #1f48ff;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab4.current_tab {
    cursor: default;
}

#collider_tab5 {
    background-color: black;
    border: 1px solid #ea1a78;
    color: #ea1a78;
    text-shadow: 0 0 0.2em #ea1a78, 0 0 0.5em #9f1955;
    cursor: pointer;
}

#collider_tab5:hover {
    background-color: #30081b;
    box-shadow: 0 0 0.4em #ea1a78 inset;
}

#collider_tab5:active, #collider_tab5.current_tab {
    background-color: #ea1a78;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab5.current_tab {
    cursor: default;
}

#collider_tab6 {
    background-color: black;
    border: 1px solid #ff8c00;
    color: #ff8c00;
    text-shadow: 0 0 0.2em #ff8c00, 0 0 0.5em #9f6319;
    cursor: pointer;
}

#collider_tab6:hover {
    background-color: #301e08;
    box-shadow: 0 0 0.4em #ff8c00 inset;
}

#collider_tab6:active, #collider_tab6.current_tab {
    background-color: #ff8c00;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab6.current_tab {
    cursor: default;
}

#collider_tab7 {
    background-color: black;
    border: 1px solid #3dff64;
    color: #3dff64;
    text-shadow: 0 0 0.2em #3dff64, 0 0 0.5em #1fc740;
    cursor: pointer;
}

#collider_tab7:hover {
    background-color: #0a3d14;
    box-shadow: 0 0 0.4em #3dff64 inset;
}

#collider_tab7:active, #collider_tab7.current_tab {
    background-color: #3dff64;
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab7.current_tab {
    cursor: default;
}

#collider_tab8 {
    background-color: black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    text-shadow: 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.5em hsl(calc(var(--time) * 36 + 180), 90%, 40%);
    cursor: pointer;
}

#collider_tab8:hover {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 12%);
    box-shadow: 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 60%) inset;
}

#collider_tab8:active, #collider_tab8.current_tab {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    color: black;
    text-shadow: none;
    box-shadow: none;
}

#collider_tab8.current_tab {
    cursor: default;
}

#collider_block {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1.65em;
}

#collider_view, #collider_view2, #collider_view3 {
    width: 60em;
    height: 30em;
    display: none;
}

@media (pointer: coarse) {
    .collapse_header {
        flex-direction: column;
    }

    .collapse_text {
        text-align: left;
    }

    .collapse_panel {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .collapse_button {
        margin-left: 0em;
        margin-right: 0.4em;
    }

    .collapse_info2 {
        text-align: left;
    }

    .atomic_spice_panel {
        margin-bottom: 1.5em;
    }

    #collapse_auto_buttons, #collapse_spice, #collapse_time, #collapse_decay {
        justify-content: left;
    }

    #collapse_auto_block {
        margin-bottom: 1.5em;
    }

    .co_auto_margin {
        margin-top: 2em;
    }
    
    #collider_tabs {
        flex-wrap: wrap;
    }

    #collider_view, #collider_view2, #collider_view3 {
        width: 100%;
        height: auto;
        display: none;
    }
}

#collider_view {
    filter: hue-rotate(calc(25deg * sin(var(--time)) - 25deg)) brightness(calc(-10% * sin(var(--time)) + 110%)) saturate(calc(10% * sin(var(--time)) + 90%)) drop-shadow(0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%)) drop-shadow(0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%));
}

#collider_view2 {
    filter: hue-rotate(calc(16deg * sin(var(--time) * 3) + 16deg)) brightness(calc(50% * sin(var(--time) * 3) + 150%)) saturate(calc(-10% * sin(var(--time) * 3) + 90%)) drop-shadow(0 0 0.2em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 50%)) drop-shadow(0 0 0.5em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 40%));
}

.pure_collider {
    filter: drop-shadow(0 0 0.1em white) drop-shadow(0 0 0.2em #444444) drop-shadow(0 0 0.3em #222222) drop-shadow(0 0 0.4em #111111) drop-shadow(0 0 0.5em black);
}

.red_collider {
    filter: drop-shadow(0 0 0.1em #14ebff) drop-shadow(0 0 0.2em #00464d) drop-shadow(0 0 0.3em #002124) drop-shadow(0 0 0.4em #001214) drop-shadow(0 0 0.5em black);
}

.yellow_collider {
    filter: drop-shadow(0 0 0.1em #1f48ff) drop-shadow(0 0 0.2em #000f4d) drop-shadow(0 0 0.3em #000724) drop-shadow(0 0 0.4em #000414) drop-shadow(0 0 0.5em black);
}

.green_collider {
    filter: drop-shadow(0 0 0.1em #ea1a78) drop-shadow(0 0 0.2em #430a23) drop-shadow(0 0 0.3em #1f0511) drop-shadow(0 0 0.4em #11030a) drop-shadow(0 0 0.5em black);
}

.blue_collider {
    filter: drop-shadow(0 0 0.1em #ff8c00) drop-shadow(0 0 0.2em #43290a) drop-shadow(0 0 0.3em #1f1305) drop-shadow(0 0 0.4em #110b03) drop-shadow(0 0 0.5em black);
}

.pink_collider {
    filter: drop-shadow(0 0 0.1em #3dff64) drop-shadow(0 0 0.2em #0c501a) drop-shadow(0 0 0.3em #06270d) drop-shadow(0 0 0.4em #041607) drop-shadow(0 0 0.5em black);
}

.rainbow_collider {
    filter: hue-rotate(calc(var(--time) * 36deg + 180deg)) brightness(calc(-60% * cos((var(--time) * 36 + 280) * pi / 180) + 160%)) saturate(calc(10% * cos((var(--time) * 36 + 280) * pi / 180) + 90%)) drop-shadow(0 0 0.1em hsl(calc(var(--time) * 36 + 180), 90%, 60%)) drop-shadow(0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 16%)) drop-shadow(0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 8%)) drop-shadow(0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 4%)) drop-shadow(0 0 0.5em black);
}

.collider_text {
    color: white;
    font-size: 1.25em;
    margin-left: 1.5em;
}

#activate_collider {
    margin-left: 1.5em;
}

.unstable_spice {
    color: hsl(calc(18 * sin(var(--time) * 3) + 26), 100%, var(--unstable_light));
    text-shadow: 0 0 0.2em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 50%), 0 0 0.5em hsl(calc(18 * sin(var(--time) * 3) + 16), 100%, 40%);
}

.decayed_spice {
    color: hsl(300, var(--decayed_sat), var(--decayed_light));
    text-shadow: 0 0 0.2em hsl(300, calc(6% * sin(var(--time)) + 16%), 40%);
}

.pure_antispice {
    color: white;
    text-shadow: 0 0 0.1em white, 0 0 0.2em #444444, 0 0 0.3em #222222, 0 0 0.4em #111111, 0 0 0.5em black;
}

.red_antispice {
    color: #14ebff;
    text-shadow: 0 0 0.1em #14ebff, 0 0 0.2em #00464d, 0 0 0.3em #002124, 0 0 0.4em #001214, 0 0 0.5em black;
}

.yellow_antispice {
    color: #1f48ff;
    text-shadow: 0 0 0.1em #1f48ff, 0 0 0.2em #000f4d, 0 0 0.3em #000724, 0 0 0.4em #000414, 0 0 0.5em black;
}

.green_antispice {
    color: #ea1a78;
    text-shadow: 0 0 0.1em #ea1a78, 0 0 0.2em #430a23, 0 0 0.3em #1f0511, 0 0 0.4em #11030a, 0 0 0.5em black;
}

.blue_antispice {
    color: #ff8c00;
    text-shadow: 0 0 0.1em #ff8c00, 0 0 0.2em #43290a, 0 0 0.3em #1f1305, 0 0 0.4em #110b03, 0 0 0.5em black;
}

.pink_antispice {
    color: #3dff64;
    text-shadow: 0 0 0.1em #3dff64, 0 0 0.2em #0c501a, 0 0 0.3em #06270d, 0 0 0.4em #041607, 0 0 0.5em black;
}

.rainbow_antispice {
    color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    text-shadow: 0 0 0.1em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.5em black;
}

.unstable_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

@media (pointer: coarse) {
    #unstable_boost {
        font-size: 1em;
    }
}

#research_unlock {
    font-weight: bold;
}

#research_title, #antiperks_title {
    margin-top: 1.5em;
}

.research_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.research_auto_text {
    display: inline;
    color: white;
    font-size: 1.25em;
    margin-top: 0em;
    margin-bottom: 0em;
}

#research_info {
    width: 47em;
}

.research_number {
    font-size: 1.5em;
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.research_options {
    display: flex;
    flex-wrap: wrap;
    width: 60em;
    margin-top: 0.75em;
    margin-left: 1.5em;
}

#research_automation_block {
    margin-bottom: 1.5em;
}

#research_completed_block {
    margin-top: 1.5em;
}

#research_auto_toggle, #research_view_toggle {
    display: inline;
}

.research_button {
    padding-left: 0.4em;
    padding-right: 0.4em;
    background-color: #311936;
    height: 1.5em;
    font-family: "Fira Code";
    font-size: 2em;
    font-weight: 700;
    color: white;
    border: 1px solid white;
    margin-right: 0.3em;
    margin-bottom: 0.3em;
    cursor: pointer;
}

.research_button:hover {
    background-color: #421d49;
}

.research_button:active {
    background-color: #571c66;
}

.r_repeat {
    color: #ffd107;
    text-shadow: 0 0 0.2em #ffd107;
}

.r_special {
    color: #00ccff;
    text-shadow: 0 0 0.2em #00ccff;
}

.r_select {
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
}

.r_view, .r_view:hover, .r_view:active {
    background-color: white;
    color: black;
    text-shadow: none;
    cursor: default;
}

.r_active, .r_active:hover, .r_active:active {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    cursor: default;
}

#research_info_block {
    margin-left: 1.5em;
}

#research_control {
    display: flex;
    margin-top: 1.25em;
    width: 60em;
    height: 2.8em;
}

@media (pointer: coarse) {
    .research_options {
        width: 100%;
    }

    #research_control {
        width: 100%;
    }

    #research_info {
        width: 100%;
    }
    
}

.research_toggle {
    padding: 0.2em 0.4em;
    font-family: "Fira Code";
    font-size: 1.5em;
    font-weight: 400;
    margin-right: 1em;
    width: auto;
}

.r_begin {
    background-color: black;
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset;
    cursor: pointer;
}

.r_begin:hover {
    background-color: black;
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)), 0 0 0.6em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)) inset;
}

.r_begin:active {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
}

.r_pause {
    background-color: hsl(calc(30 * sin(var(--time)) + 102), 80%, 10%);
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset, 0 0 0.8em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%) inset;
    cursor: pointer;
}

.r_pause:hover {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 80%, 20%);
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)) inset, 0 0 1em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset;
}

.r_pause:active {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
}

.r_done {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    font-weight: 700;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    cursor: default;
}

#research_back {
    width: 100%;
    background-color: black;
}

#research_progress {
    width: 0%;
    height: 100%;
}

.r_on {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.3em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.6em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
}

.r_off {
    background-color: hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    box-shadow: none;
}

#research_boost {
    margin-top: 3em;
    margin-bottom: 0.75em;
}

#research_upgrade {
    margin-left: 1.5em;
}

.co_challenge_panel {
    display: flex;
    width: 70em;
    padding: 1em;
    background-color: black;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%) inset;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.co_challenge_text {
    font-size: 1.35em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
}

.co_challenge_header {
    font-size: 1.35em;
    font-weight: 400;
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    margin-top: 0em;
    margin-bottom: 0em;
}

.co_challenge_block {
    flex-grow: 1;
}

.co_challenge_button {
    font-family: "Fira Code";
    font-size: 1.85em;
    font-weight: 700;
    width: 7.5em;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 7.5em;
    margin-left: 1em;
}

.small_text {
    font-size: 0.75em;
}

.outside {
    background-color: hsl(calc(30 * sin(var(--time)) + 102), 80%, 10%);
    color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    text-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset, 0 0 1em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%) inset;
    cursor: pointer;
}

.outside:hover {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 80%, 20%);
    color: white;
    text-shadow: 0 0 0.2em white, 0 0 0.5em hsl(calc(30 * sin(var(--time)) + 102), 100%, 40%);
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)), 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%), 0 0 0.2em hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light)) inset, 0 0 1em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%) inset;
}

.outside:active {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
}

.inside {
    background-color: hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    color: black;
    text-shadow: none;
    border: 1px solid hsl(calc(30 * sin(var(--time)) + 92), 100%, var(--collapse_light));
    box-shadow: 0 0 0.4em hsl(calc(30 * sin(var(--time)) + 102), 100%, 50%);
    cursor: default;
}

@media (pointer: coarse) {
    .co_challenge_header {
        font-size: 1.2em;
        margin-bottom: 0.15em;
    }

    .co_challenge_text {
        font-size: 1em;
    }

    .co_challenge_button {
        font-size: 1.35em;
        width: 100%;
        height: 2em;
        flex-basis: 2em;
        flex-grow: 0;
        flex-shrink: 0;
        margin-left: 0em;
        margin-top: 0.75em;
        padding: 0.1em 0em;
    }

    .co_challenge_panel {
        width: calc(100% - 2em);
        flex-direction: column;
    }

    .small_text {
        font-size: 1em;
    }
}

#collapse_challenge_auto {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em;
}

.challenge_auto_block {
    display: flex;
    margin-top: 0.1em;
    margin-bottom: 0.6em;
}

.antispice_block {
    text-align: center;
    flex-basis: 33%;
    flex-grow: 1;
}

.antispice_panel {
    display: flex;
}

@media (pointer: coarse) {
    .antispice_panel {
        flex-direction: column;
    }
}

.antispice_text {
    color: white;
    font-size: 1.25em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    text-align: center;
}

#antispice_reduction {
    font-size: 1.5em;
}

#antispice_perk_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    height: 12em;
    margin-left: calc(50% - 32.4em);
    margin-bottom: 18.5em;
}

@media (pointer: coarse) {
    #antispice_perk_block {
        width: 32.4em;
        height: 36em;
        margin-left: calc(50% - 16.2em);
        margin-bottom: 11em;
    }
}

.antispice_perk {
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    margin: 0.5em;
    width: 17em;
    height: 9em;
}

.ap_locked {
    background-color: black;
    color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    cursor: default;
}

.ap_unlocked {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 8%);
    color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    text-shadow: 0 0 0.15em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.45em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.6em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.75em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.6em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.8em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 1em black, 0 0 1em hsl(calc(var(--time) * 36 + 180), 90%, 40%) inset, 0 0 2.5em hsl(calc(var(--time) * 36 + 180), 90%, 24%) inset;
    cursor: pointer;
}

.ap_unlocked:hover {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 16%);
    color: white;
    text-shadow: 0 0 0.15em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.45em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.6em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.75em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.6em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.8em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 1em black, 0 0 2em hsl(calc(var(--time) * 36 + 180), 90%, 60%) inset, 0 0 5em hsl(calc(var(--time) * 36 + 180), 90%, 40%) inset;
}

.ap_unlocked:active {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    color: black;
    text-shadow: 0 0 0.25em black, 0 0 0.5em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.6em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.8em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 1em black;
}

.ap_unlocked2 {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 8%);
    color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    text-shadow: 0 0 0.075em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.15em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.225em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.375em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.1em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.5em black, 0 0 0.5em hsl(calc(var(--time) * 36 + 180), 90%, 40%) inset, 0 0 1.25em hsl(calc(var(--time) * 36 + 180), 90%, 24%) inset;
    cursor: pointer;
}

.ap_unlocked2:hover {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 16%);
    color: white;
    text-shadow: 0 0 0.075em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.15em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.225em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.375em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.1em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.5em black, 0 0 1em hsl(calc(var(--time) * 36 + 180), 90%, 60%) inset, 0 0 2.5em hsl(calc(var(--time) * 36 + 180), 90%, 40%) inset;
}

.ap_unlocked2:active {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    color: black;
    text-shadow: 0 0 0.125em black, 0 0 0.25em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.1em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.3em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 0.5em black;
}

.ap_bought {
    background-color: hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    color: black;
    text-shadow: 0 0 0.25em black, 0 0 0.5em black;
    border: 1px solid hsl(calc(var(--time) * 36 + 180), 90%, 60%);
    box-shadow: 0 0 0.2em hsl(calc(var(--time) * 36 + 180), 90%, 60%), 0 0 0.4em hsl(calc(var(--time) * 36 + 180), 90%, 16%), 0 0 0.6em hsl(calc(var(--time) * 36 + 180), 90%, 8%), 0 0 0.8em hsl(calc(var(--time) * 36 + 180), 90%, 4%), 0 0 1em black;
    cursor: default;
}

.ap_special {
    margin-left: 27.5em;
    margin-top: 2.5em;
}

.ap_special2 {
    margin-left: 18.5em;
    margin-top: 2.5em;
}

.ap_special3 {
    margin-top: 2.5em;
}

@media (pointer: coarse) {
    .ap_special {
        margin-left: 9.625em;
    }

    .ap_special2 {
        margin-left: 0.5em;
    }
}

#refund_perks, #antispice_auto_toggle {
    margin-top: 0.25em;
    margin-bottom: 0.75em;
}

.exploration_screen {
    position: relative;
    border-bottom: 1px solid white;
    height: 43vw;
    margin: -32px;
    margin-bottom: 0px;
}

#exploration_view {
    width: 100%;
    height: 100%;  
    overflow: hidden;
    zoom: 100%;
}

#exploration_map {
    position: relative;
    width: 2040em;
    height: 2040em;
}

#exploration_bg {
    position: absolute;
    background: #171019;
    width: 2040em;
    height: 2040em;
    top: 0em;
    left: 0em;
    z-index: -2;
}

#exploration_bg2 {
    position: absolute;
    width: 2040em;
    height: 2040em;
    top: 0em;
    left: 0em;
    z-index: -1;
}

#exploration_stars {
    visibility: hidden;
    width: 0em;
    height: 0em;
}

#turbulence {
    width: 100%;
    height: 100%;
    filter: brightness(85%) saturate(70%);
    mix-blend-mode: hard-light;
}

.realm {
    position: absolute;
    border-radius: 50%;
    filter: drop-shadow(0 0 0.15em black) drop-shadow(0 0 0.3em black);
    cursor: pointer;
    transform: scale(1);
}

.current_realm {
    transform: scale(calc(0.125 * sin(var(--time) * 3.141592) + 1.125));
}

.realm:hover {
    filter: brightness(1.5) drop-shadow(0 0 0.15em black) drop-shadow(0 0 0.3em black);
}

#exploration_selected {
    display: none;
    position: absolute;
    transform: scale(1) rotate(calc(var(--time) * 45deg));
}

#exploration_selected.current_realm {
    transform: scale(calc(0.125 * sin(var(--time) * 3.141592) + 1.125)) rotate(calc(var(--time) * 45deg));
}

.realm_line {
    padding: 0em;
    margin: 0em;
    background-color: hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%);
    filter: drop-shadow(0 0 0.15em black) drop-shadow(0 0 0.3em black);
    opacity: 50%;
    line-height: 1px;
    position: absolute;
    height: 0.5em;
    z-index: -1;
}

#realm_view_panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.expand_panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.exploration_panel {
    filter: drop-shadow(0 0 0.1em black) drop-shadow(0 0 0.2em black) drop-shadow(0 0 0.3em black);
    padding-left: 1em;
    padding-right: 1em;
}

#realm_view_panel .exploration_panel {
    padding-top: 2em;
    padding-bottom: 1em;
}

.expand_panel .exploration_panel {
    padding-top: 1em;
    padding-bottom: 2em;
}

.expand_button {
    position: relative;
    width: 12.5em;
    padding: 0.4em 0.6em;
    font-family: "Fira Code";
    font-size: 2.25em;
    cursor: default;
    pointer-events: auto;
}

.expand_text {
    font-size: 1.15em;
    font-weight: 400;
    color: white;
    margin-top: 0.25em;
    margin-bottom: 0em;
    text-align: center;
}

#expand_up {
    font-size: 1.5em;
    font-weight: 500;
    margin-top: 0.5em;
}

#expand_req2 {
    display: none;
    font-size: 1.5em;
    margin-top: 0.5em;
    color: grey;
}

.exploration_text {
    font-size: 1em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: center;
}

.exploration_text2 {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: center;
}

.exploration_text3 {
    font-size: 1.5em;
    font-weight: 400;
    color: white;
    margin-top: 0em;
    margin-bottom: 0em;
    text-align: center;
}

#exploration_more {
    margin-top: -0.4em;
}

.exploration_block {
    flex: 0.25;
    padding: 0em 1em;
}

#realm_view {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

#center_distance {
    margin-bottom: 0.75em;
}

.ex_auto_text {
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    margin-top: 0.09em;
    margin-bottom: 0em;
    margin-right: 0.5em;
    text-align: right;
    display: inline;
}

#revisit_auto_buttons {
    display: flex;
    justify-content: center;
    margin-top: 1em;
}

#revisit_shards, #revisit_time {
    display: flex;
    justify-content: center;
    margin-top: 0.25em;
}

#revisit_auto_toggle {
    font-size: 1.25em;
}

#revisit_auto_mode {
    font-size: 1.25em;
    margin-right: 0em;
    cursor: pointer;
}

#re_shards_input, #re_time_input {
    font-size: 1em;
}

#realm_current {
    font-size: 1.75em;
    margin-bottom: 0.75em;
    margin-top: 3em;
}

#galactic_shards_header {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    text-align: center;
}

.ex_upgrade_menu {
    display: flex;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.ex_upgrade {
    position: relative;
    padding: 0.35em 0.5em;
    font-family: "Fira Code";
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0.5em;
    cursor: default;
}

.galactic_shards {
    background-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%) 30%, hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 0.125em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%)) drop-shadow(0 0 0.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%));
}

.dark_spice {
    color: hsl(300, calc(12.5% * sin(var(--time)) + 57.5%), 35%);
    text-shadow: 0 0 0.1em hsl(300, calc(10% * sin(var(--time)) + 40%), 15%), 0 0 0.15em black, 0 0 0.2em black, 0 0 0.25em black, 0 0 0.3em black, 0 0 0.4em black, 0 0 0.5em black;
}

.galactic_cost {
    background-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%) 30%, hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 0.125em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%)) drop-shadow(0 0 0.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%));
    font-weight: 700;
}

.dark_cost {
    color: hsl(300, calc(12.5% * sin(var(--time)) + 57.5%), 35%);
    text-shadow: 0 0 0.1em hsl(300, calc(10% * sin(var(--time)) + 40%), 15%), 0 0 0.15em black, 0 0 0.2em black, 0 0 0.25em black, 0 0 0.3em black, 0 0 0.4em black, 0 0 0.5em black;
    font-weight: 700;
}

.dark_header {
    display: flex;
}

.dark_panel {
    flex-grow: 1;
}

#galactic_shards_num2, #galactic_shards_text2 {
    text-align: right;
}

#dark_buy_cs {
    display: inline;
}

#dark_gen_cs {
    margin-top: 0em;
    margin-bottom: 3.5em;
}

#dark_gen_cv {
    display: none;
    margin-top: 0em;
    margin-bottom: 3.5em;
}

.galactic_upgrade {
    position: relative;
    padding: 0.5em 0.5em;
    font-family: "Fira Code";
    font-size: 0.9em;
    font-weight: 400;
    margin: 0.5em;
    width: 17em;
    height: 9em;
    cursor: default;
}

#galactic_upgrade_block {
    display: flex;
    flex-wrap: wrap;
    width: 64.8em;
    margin-left: calc(50% - 32.4em);
    margin-top: 5em;
}

@media (pointer: coarse) {
    #galactic_upgrade_block {
        width: 32.4em;
        margin-left: calc(50% - 16.2em);
    }
    
    .dark_header {
        flex-direction: column-reverse;
    }

    .galactic_shards_panel {
        margin-bottom: 1.5em;
    }

    #galactic_shards_text2, #galactic_shards_num2 {
        text-align: left;
    }

    .ex_upgrade_menu {
        flex-direction: column;
    }

    #realm_capacity_block {
        margin-top: 3em;
    }

    #exploration_more {
        margin-top: -0.6em;
    }

    .exploration_screen {
        height: calc(100vh - 11.5em);
        /*calc(100vw / 0.43)*/
    }

    #exploration_map {
        transform: rotate(90deg);
    }
}

#coming_soon {
    font-size: 1.5em;
    font-weight: 400;
    color: white;
    text-align: center;
    margin-top: 1em;
}

.ex_locked {
    background: black;
    color: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%);
    border: solid 1px hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%);
}

.ex_unlocked {
    background: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 80%, 10%);
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 50%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 50%)) 1;
    box-shadow: 0 0 0.2em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 0.4em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%), 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%) inset, 0 0 1em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%) inset;
    cursor: pointer;
}

.ex_unlocked:hover {
    background: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 90%, 20%);
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%)) 1;
    box-shadow: 0 0 0.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%), 0 0 0.625em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%) inset, 0 0 1.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%) inset;
}

.ex_unlocked:active {
    background: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%));
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%)) 1;
    box-shadow: 0 0 0.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%);
}

.ex_unlocked .galactic_span.bold, .ex_unlocked:hover .galactic_span.bold, .ex_unlocked:active .galactic_span.bold {
    font-weight: bold;
}

.ex_unlocked2 {
    background: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 80%, 10%);
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 50%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 50%)) 1;
    box-shadow: 0 0 0.4em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 0.8em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%), 0 0 1.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%) inset, 0 0 3em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%) inset;
    cursor: pointer;
}

.ex_unlocked2:hover {
    background: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 90%, 20%);
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%)) 1;
    box-shadow: 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 1em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%), 0 0 1.875em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%) inset, 0 0 3.75em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%) inset;
}

.ex_unlocked2:active, .ex_unlocked3:active {
    background: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%));
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%)) 1;
    box-shadow: 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 1em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%);
}

.ex_bought {
    background: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%));
    color: black;
    text-shadow: none;
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%)) 1;
    box-shadow: 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 1em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%);
}

.ex_unlocked .galactic_span, .ex_unlocked2 .galactic_span, .ex_unlocked3 .galactic_span {
    font-weight: 500;
    background-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%) 30%, hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%) 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 0.125em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%)) drop-shadow(0 0 0.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%));
}

.ex_unlocked:hover .galactic_span, .ex_unlocked2:hover .galactic_span, .ex_unlocked3:hover .galactic_span {
    font-weight: 400;
    color: white;
    filter: drop-shadow(0 0 0.125em white) drop-shadow(0 0 0.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 40%));
}

.ex_unlocked:active .galactic_span, .ex_unlocked2:active .galactic_span, .ex_unlocked3:active .galactic_span {
    font-weight: 400;
    color: black;
    filter: none;
}

.ex_unlocked2 .galactic_span.bold, .ex_unlocked2:hover .galactic_span.bold, .ex_unlocked2:active .galactic_span.bold {
    font-weight: bold;
}

.ex_unlocked3 {
    background: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 80%, 10%);
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 50%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 50%)) 1;
    box-shadow: 0 0 0.4em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 0.8em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%), 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%) inset, 0 0 1em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%) inset;
    cursor: pointer;
}

.ex_unlocked3:hover {
    background: hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 90%, 20%);
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(hsl(calc(7.5 * sin(var(--time) * 1.5) + 302.5), 100%, 65%), hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 55%)) 1;
    box-shadow: 0 0 0.5em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%), 0 0 1em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%), 0 0 0.625em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 45%) inset, 0 0 1.25em hsl(calc(7.5 * sin(var(--time) * 1.5) + 282.5), 100%, 40%) inset;
}

.ex_unlocked3 .galactic_span.bold, .ex_unlocked3:hover .galactic_span.bold, .ex_unlocked3:active .galactic_span.bold {
    font-weight: bold;
}

.statistics_text {
    font-size: 1.333em;
    font-weight: 400;
    color: white;
    text-align: center;
}

@media (pointer: coarse) {
    .statistics_text {
        font-size: 1.167em;
    }
}

#statistics_buttons {
    display: none;
}

.statistics_button {
    font-size: 1.25em;
}

#compendium_page {
    margin-top: 3em;
}

.compendium_entry {
    margin-top: 1em;
    margin-bottom: 0em;
    text-align: center;
}

.compendium_title {
    font-size: 3em;
    font-weight: 700;
    margin-top: 0em;
    margin-bottom: 0.25em;
    cursor: pointer;
    user-select: none;
}

.compendium_hidden {
    font-weight: 400;
}

.compendium_default {
    color: white;
}

.compendium_body {
    display: block;
    font-size: 1.333em;
    color: white;
    width: 40em;
    text-align: center;
    margin-top: 0em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
}

@media (pointer: coarse) {
    .compendium_body {
        width: 100%;
    }
}

.settings_block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 0.6em;
}

#settings_block1 {
    margin-top: 0em;
}

#save_block {
    margin-top: 5em;
    margin-bottom: 3em;
}

#wipe_block, #switch_block {
    margin-top: 3em;
}

.settings_button {
    padding: 0.2em 0.2em;
    width: 16em;
    height: 4em;
    background-color: #311936;
    font-family: "Fira Code";
    font-size: 1.25em;
    font-weight: 400;
    color: white;
    border: 1px solid white;
    margin-left: 0.25em;
    margin-right: 0.25em;
    cursor: default;
}

.can_modify {
    cursor: pointer;
}

.settings_button:hover {
    background-color: #421d49;
}

.settings_button.can_modify:active {
    background-color: #571c66;
}

@media (pointer: coarse) {
    .settings_button {
        font-size: 1em;
        width: 20em;
        height: 5em;
    }
}

.s_big {
    font-size: 2em;
    padding: 0.125em 0.125em;
    width: 10em;
    height: 2.5em;
    margin-left: 0.15625em;
    margin-right: 0.15625em;
}

#wipe_save {
    color: #ff2714;
}

.hotkeys_list {
    font-size: 1em;
    color: white;
    margin-top: 3em;
    margin-bottom: 0em;
    text-align: center;
}

.info {
    color: white;
    font-size: 1.25em;
    margin-top: 6em;
    margin-bottom: 0.5em;
}

#classic_info {
    display: none;
    margin-top: 1.3em;
}

.link {
    color: #ff3dd8;
    cursor: pointer;
    margin-right: 0.5em;
}

.link:hover {
    color: #fd74e2;
}

.title {
    font-family: "Fira Code";
    font-size: 2.857em;
    font-weight: bold;
    color: #ff3dd8;
    margin-top: 0.4em;
    margin-bottom: 0.8em;
}

.change_head {
    font-family: "Fira Code";
    color: white;
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.change_minor {
    font-family: "Fira Code";
    color: #aaaaaa;
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.change_details {
    font-family: "Fira Code";
    color: #aaaaaa;
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
    cursor: pointer;
}

.change_details:hover {
    color: white;
}

.change_major {
    font-family: "Fira Code";
    color: #ff3dd8;
    font-size: 1.4em;
    margin-top: 0em;
    margin-bottom: 0em;
}

.savebank_body {
    height: 100vh;
}

.savebank_header {
    background: black;
    padding: 1em;
    border: none;
    width: calc(100% - 2em);
}

.savebank_title {
    font-family: "Fira Code";
    font-size: 2.857em;
    font-weight: bold;
    color: #ff3dd8;
    margin: 0em;
    text-align: center;
}

.savebank_main {
    display: flex;
    margin: 0px;
    padding: 0px;
    height: calc(100% - 5.75em);
}

.savebank_pages {
    display: flex;
    flex-direction: column;
    width: 15em;
    flex: 0 0 15em;
}

.savebank_padding {
    background: #151116;
    height: 100%;
    flex: 1;
}

.savebank_list {
    width: 100%;
    flex: 1;
}

.savebank_files {
    display: none;
    height: 100%;
    overflow-y: auto;
}

#spices_files {
    display: block;
}

.savebank_panel {
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid white;
    width: calc(100% - 2em);
}

.savebank_panel_connect {
    padding-left: 2em;
    padding-top: 2em;
    width: calc(100% - 2em);
}

.savebank_panel_last {
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
    width: calc(100% - 2em);
}

.savebank_info {
    color: white;
    font-size: 1.25em;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

.savebank_button {
    cursor: pointer;
}
